
<template>
  <div class="admin-page-content">
    <iframe :src="src+'login'" frameborder="0" width="100%" ref="iframe" class="iframe" id="ifra"></iframe>
    <el-alert v-if="iframe_loading"
    class="alert-mobdle"
    :title="`用户名：${login_info.username} 密码：${login_info.password}`"
    type="success"
    center
    show-icon>
    <span slot="title">
      用户名：{{login_info.username}} <span class="password">密码：{{login_info.password}}</span>
    </span>
  </el-alert>
  </div>
</template>
<script>
import { getK8sInfo } from '@/api/admin/service'
export default {
  data() {
    return {
      src: '',
      login_info: {
        username: '',
        password: ''
      },
      iframe_loading: false,
    }
  },
  created() {
    const vm = this;
    const loading = this.$loading({
      lock: true,
      text: `正在获取机器集群运维数据,请耐心等待`,
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    getK8sInfo().then((response) => {
      
      if (response.code === '20000') {
        vm.src = response.data.url
        vm.login_info = {
          username: response.data.username,
          password: response.data.password
        }
        const iframe = document.querySelector('#ifra')
        if (iframe.attachEvent) {
          iframe.attachEvent('onload', function () {
            console.log('iframe已加载完毕')
            vm.iframe_loading = true
            loading.close()
          })
        } else {
          iframe.onload = function () {
            console.log('iframe已加载完毕')
            vm.iframe_loading = true
            loading.close()
          }
        }
      } else {
        loading.close()
        vm.$router.go(-1)
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.userinfo-box {
  padding: 5px 0;
  text-align: center;
}
.password-span {
  padding-left: 40px;
}
.tenxt{
  color: #409EFF;
  font-weight: bold;
}
.iframe {
  min-height: 720px;
  _height: 720px;
  height:auto !important;
  height: 720px;
}
.alert-mobdle {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  height: 40px;
  width: auto !important;
  background-color: rgba(0,0,0,0.2);
  color: #409EFF !important;
}
.password {
  padding-left: 20px;
}
</style>